<template>
  <div class="app-content">
    <!-- 顶部tips -->
    <div class="tips" ref="tips">
      <h3 style="
          color: #409eff;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 10px;
        ">
        售后日报明细
      </h3>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="订单号" style="margin-bottom: 0">
          <el-input size="small" v-model="SearchForm.OrderNo" placeholder="请输入您要搜索的订单号"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button size="mini" type="primary" @click="OnSeacrh">查询</el-button>
          <el-button size="mini" type="success" @click="CreateDialog()">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 中间表格部分 -->
    <el-table v-if="tabaleHeight.length" v-loading="loading" :data="tableData" :loading="loading" ref="table"
      size="mini" style="width: 100%" :height="tabaleHeight" :row-class-name="rowClassName" row-key="id"
      :load="tableload" border lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @expand-change="handleExpandChange">
      <el-table-column :label="item.title" :width="item.width" show-overflow-tooltip v-for="item in Page.tableHeader"
        :key="item.title">
        <template v-slot="scope">
          <span v-if="isInitialNumber(item.value)">{{ scope.row[item.value] != "" ? scope.row[item.value] : 0 }}</span>
          <span v-else>{{
        scope.row[item.value] ? scope.row[item.value] : "空"
      }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="120">
        <template v-slot="scope">
          <el-button v-if="scope.row.hasChildren" size="mini" type="text"
            @click="CreateDialog(scope.row)">新增</el-button>
          <el-button size="mini" type="text" @click="UpdataDialog(scope.row, 'UpdataDialog')">修改</el-button>
          <el-button size="mini" type="text" @click="DelCurrentItem(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页部分 -->
    <div class="pagination">
      <el-pagination @current-change="handleCurrentChange" :current-page="paramsquery.pageIndex"
        :page-size="paramsquery.pageSize" layout="total, prev, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 全局表单弹窗 -->
    <DialogComponent ref="DialogComponent" :Dialog="Dialog" :Mobile="Mobile" @Submit="Submit" />
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex"; // 引入vuex属性
import mixin from "@/mixins/mixin"; // 引入mixin
import {
  GetAfsDailyList,
  GetAfsDailyListByOrderId,
  addAfsDaily,
  UpdateAfsDaily,
  delAfsDaily,
} from "@/api/index"; // 引入订单接口
import { Page } from "./index"; // 引入页面信息
export default {
  mixins: [mixin],
  data() {
    return {
      /* 页面信息 */
      Page,
      /* 搜索部分 */
      SearchForm: {
        OrderNo: "",
      },
      /* 表格部分 */
      loading: true,
      maps: new Map(),
      tableData: [],
      paramsquery: {
        pageIndex: 1,
        pageSize: 30,
      },
      total: 0,
      /* 弹窗的信息 默认指定一个 */
      Dialog: Page.Dialog.UpdataDialog,
    };
  },
  computed: {
    ...mapState(["isMobile", "CurrentItem"]),
  },
  created() { },
  mounted() {
    this.GetDataList();
  },
  watch: {},
  methods: {
    ...mapActions(["SetCurrentItem"]),
    // 如果这些字段是空 应该为0
    isInitialNumber(ItemValue) {
      const ItemName = ["total_price", "repair_price"]
      return ItemName.includes(ItemValue);
    },
    rowClassName({ row }) {
      return row.level === 2 ? "highlight-row" : "";
    }, // 搜索列表
    OnSeacrh() {
      this.paramsquery.pageIndex = 1;
      this.GetDataList();
    },

    // 请求列表数据
    GetDataList() {
      this.loading = true;
      const data = {
        pageIndex: this.paramsquery.pageIndex,
        searchOrderId: this.SearchForm.OrderNo,
      };
      GetAfsDailyList(data).then((res) => {
        // console.log(res);
        this.loading = false;
        res.orderList.map((item) => {
          item.hasChildren = true;
          Object.entries(item).forEach(([key, value]) => {
            if (value === null) {
              item[key] = "";
            }
          });
        });
        this.tableData = res.orderList;
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.total = res.pageTotal;
        // console.log(this.tableData, "tableData");
      }).catch(err => {
        console.log(err);
        this.loading = false
      })
    },
    // 点击获取菜单绑定的接口
    handleExpandChange(row, expanded) {
      // console.log(row);
      if (!expanded) {
        let tableRef = this.$refs.table;
        tableRef.store.states.treeData[row.id].loaded = false; //设置为false
        tableRef.store.states.treeData[row.id].expanded = false;
      }
    },
    // 展开树形数据
    tableload(tree, treeNode, resolve) {
      // console.log(tree.id);
      this.maps.set(Number(tree.id), { tree, treeNode, resolve });
      GetAfsDailyListByOrderId({
        id: tree.id,
        afsOrderId: tree.afs_order_id,
      }).then((res) => {
        // console.log(res);
        resolve(res);
      });
    },
    // 新增售后日报
    CreateDialog(rows) {
      const { DialogForm, DialogFormType } = this.Page.Dialog["CreateDialog"];
      if (rows) {
        DialogFormType.forEach((item) => {
          if (
            item.value == "afs_order_id" ||
            item.value == "custom_expect" ||
            item.value == "apply_reason" ||
            item.value == "problem_descript"
          ) {
            DialogForm[item.value] = rows[item.value]
              ? String(rows[item.value])
              : "";
          }
        });
        this.SetCurrentItem(rows);
        // console.log(this.CurrentItem, 'CurrentItem');
        this.Dialog = this.Page.Dialog["CreateDialog"];
        this.$refs.DialogComponent.openModal("CreatePlaceAnOrderDialog");
      } else {
        DialogFormType[0].type = "No"
        this.Dialog = this.Page.Dialog["CreateDialog"];
        this.$refs.DialogComponent.openModal("CreatePlaceAnOrderDialog");
      }
    },
    // 修改安装日报
    UpdataDialog(rows, name) {
      // console.log(rows);
      const { DialogForm, DialogFormType } = this.Page.Dialog[name];
      DialogFormType.forEach((item) => {
        DialogForm[item.value] = rows[item.value]
          ? String(rows[item.value])
          : "";
      });
      this.SetCurrentItem(rows);
      this.Dialog = this.Page.Dialog[name];
      this.$refs.DialogComponent.openModal(name);
    },
    // 确认弹窗的信息
    Submit(e) {
      // console.log(e);
      if (e.DialogTtile == "新增售后日报") this.CreateOrder(e.form);
      if (e.DialogTtile == "修改售后日报") this.UpdataInfo(e.form);
    },
    // 确认新增e
    CreateOrder(e) {
      // console.log(e);
      e.related_pic = e.img;
      delete e.img;
      Object.entries(e).forEach(([key, value]) => {
        if (value === "") {
          e[key] = null;
        }
      });
      e.submit_time = e.submit_time == "" ? null : e.submit_time;
      addAfsDaily(e).then((res) => {
        if (res.msg) {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.$refs.DialogComponent.closeModal();
          location.reload();
        } else {
          this.$message.error("新增失败");
        }
      });
    },
    // 确认修改
    UpdataInfo(e) {
      // console.log(e);
      e.id = this.CurrentItem.id;
      e.related_pic = e.img;
      delete e.img;
      Object.entries(e).forEach(([key, value]) => {
        if (value === "") {
          e[key] = null;
        }
      });
      UpdateAfsDaily(e).then((res) => {
        // console.log(res, "修改数据");
        if (res.msg) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.GetDataList();
          this.$refs.DialogComponent.closeModal();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    // 确定删除本条信息吗
    DelCurrentItem(rows) {
      this.$confirm("您确定要删除本条数据吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delAfsDaily(rows.id).then((res) => {
            if (res.msg) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              // this.GetDataList();
              location.reload();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  components: {},
};
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
}

.tips {
  width: 100%;
  padding: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  background-color: #ecf5ff;
}

.pagination {
  width: 100%;
  height: 50px !important;
  display: flex;
  align-items: center;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}

::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.el-table__body-wrapper,
.el-scrollbar__wrap {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
}

.el-timeline-item__node--normal {
  width: 28px;
  height: 28px;
  left: -9px;
  border: 7px solid #fff;
}

.el-table__fixed,
.el-table__fixed-right {
  pointer-events: none;

  td {
    pointer-events: auto;
  }
}

/deep/ .el-table__row--level-1 {
  background-color: #ecf5ff !important;
  /* 设置突出显示的背景色 */
}

/deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
